<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>吸顶灯实现</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            /*顶部效果*/
            .top_content{
                height: 200px;
                line-height: 200px;
                text-align: center;
                background-color: #eee;
            }
            /*吸顶灯效果：默认效果*/
            .sticky{
                background-color: #333;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #fff;
            }
            /*页面主区域*/
            .main_content{
                height: 8000px;
                background-color: #eee;
            }
            /*吸顶灯效果：定死页面顶部效果*/
            .ac{
                position: fixed;
                top:0;
                width: 100%;
            }
        </style>
        <script src="js/jquery-1.11.1.js"></script>
        <script>
            $(function(){
                //JQ相关操作   思路：滚动下拉条，超过200px，吸顶灯定死页面上
                //超过200px   固定>滚动  吸顶灯通过添加样式操作：定死页面上
                //①固定值：获取到达吸顶灯位置的偏移量
                //offset() 获取或者设置元素相对于文档偏移量
                //.top，获取body顶部
                var so=$(".sticky").offset().top;  
                //$(Window) 来监听窗口的事件:滚动、窗口视图大小
                //scroll() 监听页面滚动事件
                $(window).scroll(function(){
                     
                    //②获取页面滚动值：动态值   scrollTop()获取滚动位置【动态值】
                    var st =$(window).scrollTop();
                    //超过200px:  动态值>固定值200  条件满足：页面吸顶灯样式定死
                    if(st>so){
                        $(".sticky").addClass("ac");
                    }else{
                        $(".sticky").removeClass("ac");
                    }
                });
                
                
            });
        </script>
    </head>
    <body>
        <div class="top_content">顶部内容区域</div>
        <div class="sticky">我是吸顶灯元素区域</div>
        <div class="main_content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum aut at quos reprehenderit, possimus veniam, illum sunt odio vitae temporibus fugiat architecto iusto. Quas iste explicabo ducimus nihil quasi assumenda.
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quibusdam provident cumque illo totam itaque culpa veritatis, porro laboriosam quo mollitia rerum corrupti atque voluptas maiores repellendus adipisci a officia modi?
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nam voluptatem, est quas hic, eligendi quidem perferendis accusamus soluta voluptatibus, sit aliquid expedita ipsa totam architecto minus quia odit doloribus culpa.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, nobis ducimus. Nulla culpa consequatur excepturi, cumque et magnam placeat aliquam, voluptas doloribus provident esse officia perspiciatis optio, dolor eius nisi?</div>
    </body>
</html>